import { getQuestionListApi } from '@/api'
import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import Options from './components/Options'
import Fill from './components/Fill'
import { Swiper } from 'antd-mobile'

const SelectTypes = ['one', 'many', 'check']

export default function Practice() {
    const { state } = useLocation()
    const [list, setList] = useState<QuestionModel[]>([])

    const [current, setCurrent] = useState(0)

    useEffect(() => {
        getQuestionListApi(state).then(res => {
            if (res.errCode === 0) {
                setList(res.data)
            }
        })
    }, [])

    return (
        <div className='practice'>
            {/* <div> 当前是第几题 / 总共多少题 </div> */}
            <div> {current + 1} / {list.length} </div>
            {/* 下面这里渲染题目数据 ，遍历数组， 根据当前的题目 判断是填空还是选择，渲染就行*/}
            <Swiper onIndexChange={(index) => setCurrent(index)}>
                {
                    list.map(item => <Swiper.Item key={item.id}>
                        {
                            SelectTypes.includes(item.questionType) ? <Options data={item} /> : <Fill data={item} />
                        }
                    </Swiper.Item>)
                }
            </Swiper>
        </div>
    )
}
